<template>
  <div>
    <el-dialog
      :visible.sync="visible"
      @close="onClose"
      :title="title"
      :close-on-click-modal="false"
      width="400px"
      center
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-upload
            :action="uploadApi"
            :auto-upload="false"
            :headers="updata"
            ref="upload"
            :on-success="onSuccess"
          >
            <el-button type="primary">选择文件</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传<span class="danger">{{ fileType }}</span
              >文件
            </div>
          </el-upload>
        </el-col>
        <el-col :span="12">
          <el-button @click="$refs.upload.submit()">开始上传</el-button>
        </el-col>
      </el-row>
      <el-button
        type="text"
        @click="
          downLoadFile({ method: 'get', url: templateUrl }, templateFileName)
        "
        >点击下载模板
      </el-button>
    </el-dialog>
    <el-dialog
      width="800px"
      center
      :title="`导入失败${failReasons.length}条数据`"
      :visible.sync="showFailDialog"
    >
      <el-button
        plain
        v-if="title !== '导入学生'"
        type="primary"
        class="priBtn"
        @click="lostClick"
        >去重导入</el-button
      >
      <el-scrollbar wrap-class="scroll-wrap-y" style="height: 600px;">
        <el-table :data="failReasons" stripe>
          <el-table-column type="index" width="50"> </el-table-column>
          <el-table-column prop="reason" label="失败原因"> </el-table-column>
        </el-table>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script>
import dialog from "@/mixins/component/dialog";
import store from "@/store";

export default {
  name: "ImportFile",
  mixins: [dialog],
  props: {
    fileType: {
      type: String,
      default: "xls/xlsx"
    },
    title: {
      type: String,
      required: true
    },
    uploadApi: {
      type: String,
      required: true
    },
    templateUrl: {
      type: String,
      required: true
    },
    templateFileName: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      showFailDialog: false,
      failReasons: [],
      updata: {}, //token
      uploadQuesKey: "" //获取的值
    };
  },
  created() {
    this.updata = {
      token: store.getters.getToken
    };
  },
  methods: {
    lostClick() {
      this.axios
        .post("/sys/question/uploadQueIgnoreConflict/" + this.uploadQuesKey)
        .then(res => {
          if (!res) return;
          const reaData = res.uploadConflictVOS;
          if (reaData.length == 0) {
            this.$notify.success("导入成功!");
            this.$emit("on-reload");
            this.visible = false;
            this.showFailDialog = false;
          } else {
            this.failReasons = reaData;
            this.showFailDialog = true;
          }
        });
    },
    onSuccess(res) {
      if (!res.data) {
        this.$notify.error("导入失败!");
        this.visible = false;
        return;
      }
      this.uploadQuesKey = res.data.uploadQuesKey;
      const reason = res.data.uploadConflictVOS;
      this.$refs.upload.clearFiles();
      if (!reason.length) {
        this.$notify.success("导入成功!");
        this.$emit("on-reload");
        this.visible = false;
      } else {
        this.failReasons = reason;
        this.showFailDialog = true;
      }
    }
  }
};
</script>

<style scoped>
.priBtn {
  position: absolute;
  top: 12px;
}
</style>
